import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { useAuthStore } from '@/stores/auth-store'
import { useNavigate } from '@tanstack/react-router'
import { PermissionGuard } from '@/components/permission-guard'

export function SimpleDashboard() {
  const { auth } = useAuthStore()
  const navigate = useNavigate()
  
  const handleLogout = () => {
    auth.reset()
    navigate({ to: '/sign-in' as any })
  }
  
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
          <div className="flex items-center space-x-4">
            <span className="text-sm text-gray-500">
              Welcome, {auth.user?.email}
            </span>
            <Button onClick={handleLogout} variant="outline">
              Logout
            </Button>
          </div>
        </div>
      </div>
      
      <div className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Dashboard</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">View dashboard statistics</p>
            </CardContent>
          </Card>
          
          <PermissionGuard permissions={['read:users']}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <button 
                    onClick={() => navigate({ to: '/users' as any })}
                    className="text-blue-600 hover:underline"
                  >
                    User Management
                  </button>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">Manage users and their permissions</p>
              </CardContent>
            </Card>
          </PermissionGuard>
          
          <Card>
            <CardHeader>
              <CardTitle>Settings</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">Configure application settings</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}